<!--使用虚拟列表做的针对数据量较大下拉框-->
<template>
  <vxe-pulldown class="easy-select" ref="xDown2" @hide-panel="initList" transfer>
    <template #default>
      <el-tooltip popper-class="selectToolTip" effect="dark" :content="multiple ? valueToShow.join('，') : ''" placement="top" :disabled="!multiple || valueToShow.length <= 1">
        <el-select
            popper-class="match-select"
            v-model="valueToShow"
            :multiple="multiple"
            :clearable="clearable"
            :multiple-limit="limit"
            remote
            filterable
            reserve-keyword
            collapse-tags
            :popper-append-to-body="false"
            :remote-method="search"
            @click.native="togglePanel"
            @remove-tag="resetVal"
            @clear="clear"
            :placeholder="placeholder"></el-select>
      </el-tooltip>
    </template>
    <template #dropdown>
      <div class="el-select-dropdown el-popper is-multiple" x-placement="bottom-start">
        <div class="el-scrollbar">
          <vxe-list height="200" className="" class="my-dropdown2" :data="list" auto-resize>
            <template #default="{ items }">
              <template v-if="items.length">
                <div :class="{'list-item2': true, selected: valueToShow.indexOf(item[labelKey]) > -1}" class="el-select-dropdown__item" v-for="item in items"
                     :key="item.value" @click="selectEvent2(item)">
                  <i class="fa fa-envelope-o"></i>
                  <span>{{ item[labelKey] }}</span>
                </div>
              </template>
              <template v-else>
                <div class="empty">暂无数据</div>
              </template>
            </template>
          </vxe-list>
        </div>
        <div class="popper__arrow" style="left: 35px;"></div>

      </div>
    </template>
  </vxe-pulldown>
</template>

<script>
export default {
  name: "searchSelect",
  props: {
    options: {
      type: Array,
      required: true
    },
    value: {
      type: [Array, String],
      required: true
    },
    valueKey: {
      type: String,
      default() {
        return 'value'
      }
    },
    placeholder: {
      type: String
    },
    labelKey: {
      type: String,
      default() {
        return 'label'
      }
    },
    multiple: {
      type: Boolean,
      default() {
        return true
      }
    },
    limit: {
      type: Number,
      default() {
        return 20
      }
    },
    clearable: {
      type: Boolean,
      default() {
        return false
      }
    },
  },
  data() {
    return {
      valueToShow: [],
      valueToSave: [],
      list: [],
      isResetVal: true
    }
  },
  watch: {
    options() {
      this.initList();
    },
    value(val) {
      if(this.isResetVal) {
        if(this.multiple) {
          this.valueToSave = [...val];
          let length = this.valueToSave.length,
              valueToShow = new Array(length);
          for (let i = 0; i < length; i++) {
            valueToShow[i] = this.options.find(item => {item[this.valueKey] === this.valueToSave[i]})[this.labelKey];
          }
          this.valueToShow = valueToShow;
        } else {
          this.valueToSave = val;
          this.valueToShow = this.options.find(item => {item[this.valueKey] === this.valueToSave})[this.labelKey];
        }
      } else {
        this.isResetVal = true;
      }
    }
  },
  methods: {
    togglePanel () {
      this.$refs.xDown2.togglePanel();
      this.initList();
    },
    search (query) {
      this.list = this.options.filter(item => item[this.labelKey].indexOf(query) > -1);
      this.$refs.xDown2.showPanel();
    },
    selectEvent2 (item) {
      this.isResetVal = false;
      if(this.multiple) {
        if(!Array.isArray(this.valueToShow)) {
          this.valueToShow = [];
          this.valueToSave = [];
        }
        let index = this.valueToShow.indexOf(item[this.labelKey])
        if(index === -1) {
          if(this.valueToShow.length < this.limit || !this.limit) {
            this.valueToShow.push(item[this.labelKey]);
            this.valueToSave.push(item[this.valueKey]);
          }
        } else {
          this.valueToShow.splice(index, 1);
          this.valueToSave.splice(index, 1);
        }
      } else {
        this.valueToShow = item[this.labelKey];
        this.valueToSave = item[this.valueKey];
        this.$refs.xDown2.hidePanel();
      }
      this.$emit('input', this.valueToSave)
    },
    initList() {
      this.list = this.options
    },
    resetVal(tag) {
      let val = this.options.find(item => item[this.labelKey] === tag)[this.valueKey];
      let index = this.valueToSave.findIndex(item => item === val);
      this.valueToSave.splice(index, 1);
      this.$emit('input', this.valueToSave)
    },
    clear() {
      if(this.multiple) {
        this.valueToSave = [];
      } else {
        this.valueToSave = '';
      }
      this.$emit('input',this.valueToSave);
    }
  },
  created() {
    this.initList();
  }
}
</script>

<style lang="scss" scoped>
.el-select-dropdown {
  min-width: 100%;
}
.el-select {
  width: 100%;
}
.vxe-list {
  width: 100%;
  /deep/ .vxe-list--virtual-wrapper {
    height: auto!important;
    max-height: 200px;/*no*/
    padding: 6px 0;
  }
}
.list-item2 {
  //line-height: 24px;/*no*/
  //padding-left: 14px;
  &:hover {
    background-color: #f5f7fa;
  }
  &.actived {
    color: $--color-primary;
  }
}
/deep/.match-select {
  display: none!important;
}
.empty {
  line-height: 50px;
  color: #999;
  text-align: center;
}
</style>
<style>
.selectToolTip {
  max-width: 60vw;
}
</style>
